<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="content-language" content="zh">
    <title>表格生成器</title>
    <style type="text/css">
        table, td ,th{
            border: solid 1px black;
        }
        table>thead>tr>th{
            font-weight: bolder;
            background: #dedede;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        td, th{
            padding: 8px;
        }

        .s {
            background: #d0eaf9;
        }

        #rows, #cols {
            width: 20px;
        }

        td div,th div {
            outline: none;
        }

        #tableWrap {
            padding: 10px;
        }

        input[type="button"] {
            width: 110px;
        }
        i.annotation{
            color: gray;
            font-size: 10px;
        }
    </style>
    <script src="./js/jquery-1.7.1.min.js"></script>
    <script src="./js/main.js" type="text/javascript"></script>
</head>
<body>
<div>
    <h1>表格生成器 v1.2</h1>
    <p>功能介绍:</p>
    <ul>
        <li>自定义列数和行数</li>
        <li>可合并单元格</li>
        <li>动态添加单列或单行</li>
        <li>可选表头</li>
        <li>可填写数据</li>
    </ul>

    <input type="button" id="generate" value="生成">
    行:<input id="rows" type="text" value="5" maxlength="2">
    列:<input id="cols" type="text" value="10" maxlength="2">
    <br>
    <input type="button" id="merge" value="合并单元格"> <i class="annotation">说明：选中几个单元格后，点此按钮可进行合并</i>
    <input type="button" id="addRow" value="添加一行">
    <input type="button" id="addCol" value="添加一列">
    <input type="button" id="delRow" value="删除一行">
    <input type="button" id="delCol" value="删除一列">

</div>

<hr>

<div>
    <div id="tableWrap"></div>
    <hr>

    <label><input type="checkbox" id="bsEnter"/>清除回车与空格</label>
    <label><input type="checkbox" id="clearTh"/>清除表头th</label>
    <hr>

    <textarea cols="60" rows="30" id="export"></textarea>
    <hr>

</div>

<p>声明：代码已在github上开源：<a href="https://github.com/yelog/TableGenerator" target="_blank">Yelog</a>；联系作者发邮件至邮箱：yelogeek@gmail.com</p>

</body>
</html>